<template>
<div class="disease">
  <div class="header">
    <van-nav-bar title="疾病库" left-text="<" @click-left="$router.go(-1)" />
  </div>
  <div class="mains">
    <van-tabs type='card'>
      <van-tab title="典型人群">
        <div class="main">
          <div class="left">
            <ul v-for="(item,index) in dataList" :key='index'>
              <li @click="ind=index" :class="ind==index?'active':''"><svg class="icon" aria-hidden="true">
                  <use :xlink:href="item.font"></use>
                </svg>
                <b>{{item.tab}}</b>
              </li>
            </ul>
          </div>
          <div class="right">
            <ul v-for="(item,index) in dataList[ind].matter" :key='index'>
              <li><b>{{item}}</b></li>
            </ul>
          </div>
        </div>
      </van-tab>
      <van-tab title="科室分类">
        <div class="main">
          <div class="left">
            <ul v-for="(item,index) in ksList" :key='index'>
              <li @click="ind=index" :class="ind==index?'active':''"><svg class="icon" aria-hidden="true">
                  <use :xlink:href="item.font"></use>
                </svg>
                <b>{{item.tab}}</b>
              </li>
            </ul>
          </div>
          <div class="right">
            <ul v-for="(item,index) in ksList[ind].matter" :key='index'>
              <li><b>{{item}}</b></li>
            </ul>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>

</div>
</template>

<script>
import {
  Toast
} from 'vant';
import '../../assets/font_3/iconfont'
export default {
  data() {
    return {
      ind: 0,
      flag: true,
      dataList: [{
        tab: '上班族',
        font: '#icon-yaoxiang',
        matter: ['青春痘', '风寒感冒', '咳嗽', '脱发', '痔疮', '便秘', '失眠', '颈椎病', '口臭', '口腔溃疡', '狐臭', '发烧', '风热感冒']
      }, {
        tab: '男性',
        font: '#icon-nanxing',
        matter: ['勃起功能障碍', '射精功能障碍', '男性不育', '男性生殖器疾病', '男性乳腺疾病', '中老年男性易患疾病']
      }, {
        tab: '女性',
        font: '#icon-nvxing',
        matter: ['妇科炎症', '宫颈糜烂', '宫颈炎', '女性不孕不育', '月经失调', '乳腺囊肿', '盆腔炎']
      }, {
        tab: '老人',
        font: '#icon-laoren',
        matter: ['老年性痴呆', '老年性精神病', '老年性耳聋', '脑动脉硬化', '脑卒中', '高血压', '冠心病', '糖尿病', '恶性肿瘤', '痛风', '震颤麻痹', '老年性变性骨关节病', '老年性皮肤搔痒症', '老年肺炎', '高脂血症', '颈椎病', '前列腺肥大']
      }, {
        tab: '儿童',
        font: '#icon-erke1',
        matter: ['发热', '高热惊厥', '咳嗽', '哮喘', '鼻炎', '支气管炎', '肺炎', '手足口病', '湿疹', '水痘', '幼儿急疹', '过敏性皮炎', '风疹', '白癜风', '红斑狼疮', '癣', '腹泻', '便秘', '阑尾炎', '腹痛', '胃肠炎', '奶瓶齿', '儿童龋齿', '鹅口疮', '口臭', '手足口病', '流行性感冒', '麻疹', '风疹', '猩红热', '近视', '泪囊炎', '斜视', '过敏性结膜炎', '贫血', '低血糖', '流鼻血']
      }],
      ksList: [{
        tab: '脑科',
        font: '#icon-naoke',
        matter: ['脑脓肿', '脑室炎', '脑囊虫病', '脑包虫病', '三叉神经痛', '癫痫', '头外伤颅内血肿', '脑挫裂伤', '脑肿胀', '脊髓神经鞘瘤', '脊膜膨出', '脊髓空洞', '脊髓栓系统综合症', '脑膜瘤', '胶质瘤', '垂体瘤', '颅咽管瘤', '听神经瘤', '生殖细胞瘤', '颅内动脉瘤', '动静脉畸形', '烟雾病']
      }, {
        tab: '耳科',
        font: '#icon-erke',
        matter: ['耳部外伤', '外耳炎', '中耳炎', '中耳积水', '中耳珍珠瘤', '听力障碍', '耳鸣', '眩晕', '突发性耳聋', '耳咽管阻塞']
      }, {
        tab: '眼科',
        font: '#icon-yanke',
        matter: ['青光眼', '白内障', '近视', '远视', '角膜炎', '玻璃体混浊', '眼压高', '散光', '视神经疾病', '斜眼', '结膜炎', '泪囊炎', '麦粒肿', '外麦粒肿', '沙眼', '翼状胬肉', '眼底病', '糖尿病视网膜病变']
      }, {
        tab: '鼻科',
        font: '#icon-bike',
        matter: ['鼻前庭湿疹', '鼻前庭炎', '鼻疖', '鼻外伤', '鼻内疼痛', '燥性或萎缩性鼻炎', '鼻肿、鼻部发红', '酒齄鼻', '鼻前庭囊肿']
      }, {
        tab: '牙科',
        font: '#icon-yake',
        matter: ['牙龈炎', '牙龈瘤', '口臭', '龋齿', '磨牙', '口腔溃疡']
      }]
    };
  },
  methods: {

  },
}
</script>

<style lang="scss" scoped>
.disease {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 10px;

  .header {
    width: 100%;
    height: 50px;
    line-height: 50px;
  }

  .mains {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
}

.main {
  display: flex;

  .left {
    width: 30%;
    background: #F1F1F1;

    ul li {
      display: flex;
      flex-direction: column;
      line-height: 60px;
      align-items: center;
      border-bottom: 2px solid #ccc;

      b {
        font-size: 14px;
        font-weight: 200;
      }
    }
  }

  .right {
    width: 70%;
    height: 100%;

    li {
      line-height: 40px;
      border-bottom: 2px solid #F0F0F0;
      margin-left: 6px;
      overflow-y: scroll;

      b {
        font-size: 14px;
        font-weight: 200;
      }
    }
  }

  .active {
    background: pink;
  }
}

.icon {
  width: 40px;
  height: 40px;
  background: blanchedalmond;
  border-radius: 50%;
}
</style>
